<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1" />
			<title></title>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.12.9/popper.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/layout.css') }}"> -->
           <style type="text/css">
        @media (max-width: 991px) {
            .navbar-header {
                float: none;
            }
            .navbar-left,
            .navbar-right {
                float: none !important;
            }
            .navbar-toggle {
                display: block;
            }
            .navbar-collapse {
                border-top: 1px solid transparent;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
            }
            .navbar-fixed-top {
                top: 0;
                border-width: 0 0 1px;
            }
            .navbar-collapse.collapse {
                display: none!important;
            }
            .navbar-nav {
                float: none!important;
                margin-top: 7.5px;
            }
            .navbar-nav>li {
                float: none;
            }
            .navbar-nav>li>a {
                padding-top: 10px;
                padding-bottom: 10px;
            }
            .collapse.in {
                display: block !important;
            }
        }

        .navbar-default .navbar-brand,
        .navbar-default .navbar-nav>li>a,
        .navbar-default .navbar-nav>li>a:hover,
        .navbar-default .navbar-nav>li>a:visited,
        .navbar .navbar-brand:hover {
            color: #fff;
        }

        .navbar-default .navbar-nav>li {
            margin-right: 4px;
        }

        .container-fluid>.navbar-header {
            margin-right: 40px;
            margin-left: 0;
        }

        .navbar-form {
            margin-left: 30px;
        }

        .bdt {
            width: 0;
            position: absolute;
            top: 0;
            left: 50%;
            background-color: #fff;
            height: 2px;
            transition: all .3s ease-out;
        }

        a:hover .bdt {
            width: 100%;
            left: 0;
            transition: all .3s ease-out;
        }

        
        </style>
        <style type="text/css">
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    /*背景颜色透明*/
    border-bottom: 1px solid hsla(0, 0%, 50%, .1);
}


.navbar-default .navbar-nav>li>a.active .bdt {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 2px;
    background-color: #fff;
}
#ji{
	background-color: black;
	width: auto;
	margin: 5px;
}
  </style>
	</head>

	<body  style="background-color:#50a3ba;">
		<nav class="navbar navbar-default navbar-static-top" role="navigation">
            <div class="container-fluid">
                <div class="row">
                    <div class="navbar-header col-md-3">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nn-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand " href="#">农产品价格可视化系统</a>
                    </div>
                    <div class="collapse navbar-collapse col-md-6" id="nn-navbar-collapse">
                        <ul class="nav navbar-nav navbar-left ">
                            <li><a class="active" href="#">
                        <span class="bdt"></span>首页</a></li>
                            <li><a href="#"><span class="bdt"></span>数据资源</a></li>
                            <li><a href="#"><span class="bdt"></span>填充数据2</a></li>
                            <li><a href="#"><span class="bdt"></span>填充数据3</a></li>
                        </ul>
                        <form class="nav navbar-form navbar-left " role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="请输入查找内容">
                            </div>
                            <button type="submit" class="btn btn-default" style="background-color: transparent;color: white;">搜索</button>
                            <!-- <button type="button" class="btn btn-default "></button> -->
                        </form>
                    </div>
                </div>
            </div>
        </nav>
        	<br />
	    <br />
		
		
		<iframe align="right" allowtransparency="true" frameborder="0" width="290" height="96" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=1&t=0&v=0&d=2&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=290&h=96&align=right">
			
		</iframe>
		<br />
	    <br />
		
		 <!--
         	作者：offline
         	时间：2018-04-15
         	描述：
         	<input  align="right" id="q" tabindex="1" class="input-key search-q ac_input" value="" maxlength="80" autocomplete="off">
		 </span> <span class="button">
		 	 <input type="submit" tabindex="2" id="su" value="搜  索" class="ui-btn" style="padding: 0px 5px;">
    	
        </span>
         -->
    
     
     
		
		
		

  <font color="white" size="4">环境实时监控 </font>
   <div id="demo1">
      <iframe src="parallel-aqi.html" height="400px" width="100%" scrolling="true" ></iframe>
   </div>
     
     	<font color="white" size="4">监视画面 </font>
   <div id="ji">
  <img src="img/1.jpg" width="100%" />
  
   </div>
	</body>

</html>